<template>
  <div class="notebook-con">
    <div class="w">
      <div class="line"></div>
      <div class="top">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1bc92bd7fdb80c023c6887ae4f419e71.jpg?f=webp" alt="">
      </div>
      <div class="line"></div>
      <div class="top-box">
        <router-link :to="`/product/${item.id}`" v-for="item in noteBookList" :key="item.id">
          <div class="img">
            <img v-lazy="item.imgUrl" alt="">
          </div>
          <div class="box clearfix">
            <div class="box-left">
              <h4 class="name">{{item.name}}</h4>
              <div class="text">{{item.text}}</div>
            </div>
            <div class="box-right">
              <p class="pirce">￥{{item.price}}元起</p>
              <div class="goBuy">立即购买</div>
            </div>
          </div>
          <div class="line"></div>
        </router-link>
      </div>
      <div class="new">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a6c6904c72672a67f1ddb6d4938d414.jpg?f=webp" alt="">
      </div>
      <div class="line"></div>
      <div class="end">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ed0de51cddbd973e1ac2e27ba05a0693.jpg?f=webp" alt="">
        <ul>
          <li>
            <a href="#">
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d1ffaea355ab590ee88a48c9ab1ef0f.jpg?f=webp" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d4e381d6664a0f4aa94984af7b676de5.jpg?f=webp" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/400e740d63fe4f377b05a3c969f150bf.jpg?f=webp" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a1a44f1b6a7ed090eb624969845bd7e.jpg?f=webp" alt="">
            </a>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoteBook',
  data() {
    return {
      noteBookList: []
    }
  },
  mounted() {
    this.getNoteBookList()
  },
  methods: {
    async getNoteBookList() {
      const res = await this.$API.noteBookList()
      this.noteBookList = res.data
    }
  }
}
</script>

<style lang="less" scoped>
.notebook-con {
  padding: 84px 0 90px;
  img {
    width: 100%;
    vertical-align: bottom;
  }
  .w {
    width: 720px;
    margin: 0 auto;
  }
  .line {
    height: 26px;
    background: #4878a6;
  }
  .top {
    img {
      vertical-align: top;
    }
  }
  .top-box {
    padding: 0 12px;
    background: #4878a6;
    overflow: hidden;

    .box {
      padding: 20px 27px;
      background-color: #fff;
      font-size: 25px;

      .box-left {
        float: left;
        .name {
          color: rgba(0, 0, 0, 0.87);
          font-size: 30px;
        }
        .text {
          margin-top: 20px;
        }
      }
      .box-right {
        float: right;
        text-align: right;
        .pirce {
          color: #ea625b;
        }
        .goBuy {
          width: 200px;
          height: 59.6px;
          background: #ea625b;
          color: #fff;
          text-align: center;
          line-height: 59.6px;
          margin-top: 10px;
        }
      }
    }
  }
  .end {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
      }
    }
  }
}
</style>
